<template>
  <div style="display: inline-block" v-if="data.toStock === -1 && (data.orderStatus === 4 || data.orderStatus === 5)">
    <el-button type="danger" @click="toStock" :loading="loading">{{$t('order.Convert to inventory')}}</el-button>
    <el-dialog
      :title="$t('order.toStockTitle')"
      :modal-append-to-body="false"
      :visible.sync="dialog"
      width="500px"
    >
      <div class="dialog-content">
        <span>{{$t('order.toStockText1')}}</span>
        <div class="font-red">{{$t('order.toStockText4')}}</div>

        <div class="mgt10 dialog-cancel-box">
          <div style="font-weight: bold;color: #000000">{{$t('order.toStockText2')}}<span class="font-red">（{{$t('order.toStockText5')}}）</span></div>
          <div
            v-for="(subOrder,index) in subOrders"
            class="sub-goods"
            :key="subOrder.subOrderId"
          >
            <div
              class="goods-item"
            >
              <el-checkbox :value="currentForm.selectSubOrder.indexOf(subOrder.subOrderId) !== -1" @change="checkGoods(subOrder.subOrderId)"></el-checkbox>
              <div class="goods-img">
                <img :src="subOrder.goodsImage" alt="">
              </div>
              <div class="listing">
                {{ subOrder.goodsId }} {{subOrder.variationSku ? `(${subOrder.variationSku})` : ''}}
              </div>
            </div>
            <div>
              {{$t('order.toStockText6')}}：<el-input-number v-model="subOrder.num" :max="data.subOrders[index].num" :min="0" :step="1" :precision="0" size="mini"></el-input-number> <span class="mgl10">（ {{$t('order.TOTAL')}} {{data.subOrders[index].num}} ）</span>
            </div>

          </div>

        </div>



        <div class="mgt10 dialog-cancel-box">
          <div style="font-weight: bold;color: #000000" class="mgb10">{{ $t('order.toStockText3') }}</div>
          <div class="mgb10">
            <span style="font-weight: bold" class="font-red">{{$t('order.Sticker fee')}}({{data.stickerPrice}} {{ $t('common.RMB') }})：</span>
            <el-button :type="currentForm.refundSticker === 0 ? 'primary' : ''" @click="currentForm.refundSticker = 0">{{ $t('order.Do not return') }}</el-button>
            <el-button :type="currentForm.refundSticker === 1 ? 'primary' : ''" @click="currentForm.refundSticker = 1">{{ $t('order.return') }}</el-button>
          </div>
          <div style="font-size: 12px;color: #aeaeae;" class="font-bold">{{$t('order.toStockText7')}}</div>
        </div>

      </div>
      <div slot="footer" class="dialog-footer" style="text-align: left">
        <el-button @click="dialog = false">{{$t('common.cancel')}}</el-button>
        <el-button type="primary" @click="submitForm" :loading="loading">{{$t('common.confirm')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>


import {order2Stock} from "@/api/order";
import {deepCopy} from "@/utils";
import {indexOf} from "core-js/internals/array-includes";

export default {
  name: "ToStockButton",
  props:{
    data:{
      type: Object,
    }
  },
  data(){
    return {
      loading: false,
      dialog: false,
      currentForm: {
        orderId: '',
        refundSticker: 0, // 是否退款金额
        selectSubOrder: [],
        refundGoods: [],
      },
      subOrders: [],
    };
  },
  methods:{
    toStock(){
      this.dialog = true;
      this.subOrders = deepCopy(this.data.subOrders);
      // this.currentForm.selectSubOrder = [];
      this.currentForm.selectSubOrder = this.subOrders.map(subOrder => subOrder.subOrderId);
    },
    checkGoods(subOrderId){
      const index = this.currentForm.selectSubOrder.findIndex(item=> item === subOrderId)

      if(index === -1){
        this.currentForm.selectSubOrder.push(subOrderId)
      }else{
        this.currentForm.selectSubOrder.splice(index,1)
      }

    },
    // 转为库存
    submitForm(){
      this.loading = true
      this.currentForm.orderId = this.data.orderId
      this.currentForm.accountType = this.data.accountType
      this.currentForm.refundGoods = [];
      this.subOrders.forEach(subOrder=>{
        if(this.currentForm.selectSubOrder.indexOf(subOrder.subOrderId) !== -1){
          this.currentForm.refundGoods.push({
            subOrderId: subOrder.subOrderId,
            num: subOrder.num,
          })
        }
      })
      order2Stock(this.currentForm)
        .then(res=>{
          this.loading = false
          if(res.error === 0){
            this.dialog = false;
            this.$successMessage(res.message)
            this.$emit('changeOrder');
            this.$store.dispatch('user/getInfo');
          }else{
            this.$errorMessage(res.message)
          }
        })
    },

  }
}
</script>

<style scoped lang="scss">
.dialog-content{
  .dialog-cancel-box{
    border: 1px solid #cccccc;
    border-radius: 3px;
    padding: 10px;
  }
  .goods-item{
    display: flex;
    height: 30px;
    width: 100%;
    line-height: 30px;
    margin: 10px 0;
    .goods-img{
      margin: 0 10px;
      width: 35px;
      height: 35px;
      border-radius: 5px;
      background-color: #eee;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      display: flex;
      img{
        width: 30px;
        height: 30px;
      }
    }
  }
}
.sub-goods{
  padding: 10px;
  border: 1px solid #CCCCCC;
  border-radius: 3px;;
  margin: 10px 0 15px;
}
</style>
